<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo {
        border: 1px dashed red;
        height: 200px;
        overflow: scroll;
      }
      .demo div {
        height: 400px;
        background-color: black;
        color: #fff;
      }
      .table1 {
        border: 1px solid black;
      }
      #case1-1,
      #case1-2 {
        margin-top: 300px;
        display: inline-block;
      }
      .case2 {
        border: 1px solid black;
        height: 120px;
        overflow-y: scroll;
      }
      .case2 > * {
        border: 1px solid black;
        height: 200px;
        overflow-y: scroll;
        overscroll-behavior: contain;
      }
      .case3 {
        border: 1px solid black;
        height: 200px;
        overflow-y: scroll;
      }
      .case3 > div {
        border: 1px dashed red;
        height: 50px;
        margin: 3px;
      }
      :checked + .case3 {
        overflow-anchor: none;
      }
      .case4 {
        width: 200px;
        height: 250px;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
      }
      .case4 img {
        width: 180px;
        object-fit: contain;
        scroll-snap-align: center;
      }
      .demo.case5 > div {
        background-color: #fff;
      }
      .case5 {
        scrollbar-width: thin;
        scrollbar-color: red blue;
      }
      .case5::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      .case5::-webkit-scrollbar-thumb {
        background-color: red;
      }
      .case5::-webkit-scrollbar-track {
        background-color: black;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./26-clip-path-暂无.html">上一篇</a>
      <a href="./28-pointer-events.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>scroll-behavior</dt>
        <dd>
          <p><i>让滚动平滑</i></p>
          <ul>
            <li>auto，默认值</li>
            <li>smooth，平滑</li>
          </ul>
          <section>
            <a href="#case1-1">点击到达锚点</a>
            <div class="demo" style="scroll-behavior: smooth;">
              <div>
                <p>scroll-behavior: smooth;</p>
                <span id="case1-1">锚点</span>
              </div>
            </div>
            <a href="#case1-2">点击到达锚点</a>
            <div class="demo">
              <div>
                <p>scroll-behavior: auto; 默认值</p>
                <span id="case1-2">锚点</span>
              </div>
            </div>
          </section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>overscroll-behavior</dt>
        <dd>
          <p><i>规定滚动到边缘后的行为</i></p>
          <section>
            <ul>
              <li>
                <b>auto</b>
                ，默认值
              </li>
              <li>
                <b>contain</b>
                滚动行为限制在当前元素中
              </li>
              <li>
                <b>none</b>
                ，滚动行为限制在当前元素中，且滑到底部后不再有弹性效果（主要针对移动端）
              </li>
            </ul>
            <div class="case2">
              <div>
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容
              </div>
            </div>
            <pre><code>overscroll-behavior: contain;</code></pre>
          </section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>overflow-anchor</dt>
        <dd>
          <p><i>滚动锚定</i></p>
          <ul>
            <li>auto，默认开启</li>
            <li>none</li>
          </ul>
          <button id="case3-btn">添加一个孩子</button>
          <input type="checkbox" />
          禁用滚动锚定
          <div class="case3"></div>
          <p>
            可以看出，不禁用时（默认情况），新增孩子，画面被锚定不变（不能是首屏）。而禁用后，画面会被新的元素推到下面去
          </p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>scroll-snap相关语法</dt>
        <dd>
          <p><i>可以令滚动停止时，自动将指定元素校正到指定位置</i></p>
          <table class="table1" border="1px">
            <tr>
              <th>作用于滚动容器</th>
              <th>作用于定位子元素</th>
            </tr>
            <tbody>
              <tr>
                <td>scroll-snap-type</td>
                <td>scroll-snap-stop</td>
              </tr>
              <tr>
                <td>scroll-snap-align</td>
                <td>scroll-margin/scroll-margin-*</td>
              </tr>
              <tr>
                <td>scroll-padding/scroll-padding-*</td>
              </tr>
            </tbody>
          </table>
          <p>其实只需要关注scroll-snap-type，scroll-snap-align</p>
        </dd>
        <dd>
          <h4>scroll-snap-type</h4>
          <p><i>该属性规定定位的方式</i></p>
          <ul>
            <li>x</li>
            <li>y</li>
            <li>block，文档流垂直方向</li>
            <li>inline，文档流水平方向</li>
            <li>both</li>
            <li>mandatory，附加关键字，表示强制</li>
            <li>
              proximity，附加关键字，表示强制，但由浏览器判断（如果刚好元素等于滚动区域或较小，则可能不会按设置来。因为这样刚好填满滚动区域，用户就看不出这里是滚动的）
            </li>
          </ul>
        </dd>
        <dd>
          <h4>scroll-snap-align</h4>
          <ul>
            <li>start</li>
            <li>end</li>
            <li>center</li>
          </ul>
        </dd>
        <dd>
          <pre><code>.father{
    scroll-snap-type: y mandatory;
}
.son {
    scroll-snap-align: center;
}
            </code></pre>
          <div class="case4">
            <img src="../../Source/pic.jpg" />
            <img src="../../Source/pic-transparent.png" />
            <img src="../../Source/pic.jpg" />
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>滚动条样式自定义</dt>
        <dd>
          <h4>scrollbar-width</h4>
          <p><i>滚动条宽度</i></p>
          <ul>
            <li>auto，默认</li>
            <li>thin，窄条，8px</li>
            <li>none，不显示滚动条</li>
          </ul>
        </dd>
        <dd>
          <h4>scrollbar-color</h4>
          <p><i>滚动条宽度</i></p>
          <ul>
            <li>auto，默认</li>
            <li>dark，深色模式</li>
            <li>light，浅色模式</li>
            <li>&lt;color&gt;，指定颜色，两个值，第一个是滑块颜色，第二个是轨道颜色</li>
          </ul>
        </dd>
        <dd>
          <h4>Chrome使用私有方法来定义</h4>
          <ul>
            <li>:-webkit-scrollbar</li>
            <li>:-webkit-scrollbar-thumb</li>
            <li>:-webkit-scrollbar-track</li>
          </ul>
        </dd>
        <dd>
          <div class="demo case5">
            <div></div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
      getCase3()
      function getCase3() {
        const btn = document.querySelector('#case3-btn')
        const fatherDom = document.querySelector('.case3')
        let i = 0
        btn.addEventListener('click', function () {
          const newChild = document.createElement('div')
          newChild.innerText = `我是第${i++}个新孩子`
          if (i == 0) fatherDom.appendChild(newChild)
          else fatherDom.insertBefore(newChild, fatherDom.firstChild)
        })
      }
    </script>
  </body>
</html>
